<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>

	<body>
		<canvas id="canvas" width="700" height="800" style="border: 1px solid #333;margin: 0 auto;"></canvas>
	</body>
	<script>
//var a = ['1','2','3'];
//		function aa(){
//			console.log(arguments)
//			console.log(Array.prototype.slice.call(arguments));
//		}
//		aa('1','2','3')
		
//		var canvas = document.querySelector('#canvas');
//		if (canvas.getContext('2d')) {
//			var context = canvas.getContext('2d');
//		} else {
//			alert('1');
//		}
		//使用context进行绘制。
//		context.beginPath();
//		context.moveTo(100, 100);
//		context.lineTo(500, 700);
//		context.lineTo(100, 700);
//		context.lineTo(100, 100);
//		context.lineWidth = '5';
//		context.closePath();
//		
//		context.strokeStyle = 'royalblue';
//		context.stroke();
//		
//		context.fillStyle = 'indianred';
//		context.fill();
		
		
		
		window.onload = function(){
			
		var canvas = document.querySelector('#canvas');
		if (canvas.getContext('2d')) {
			var context = canvas.getContext('2d');
		} else {
			alert('1');
		}
		
		var a = [
			{b:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:'#caff67'},
			{b:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:'#ff3c00'},
			{b:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:'red'},
			{b:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:'#ccc'},
			{b:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:'green'},
			{b:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:'blue'},
			{b:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:'gloden'}
		//类-位置 颜色
		]
		
		console.log(a)
		dao(a,context);
				
		
		function dao(ban,txt){
			ban.forEach(function(item,index){ 
				txt.beginPath();
				txt.moveTo(ban[index].b[0].x,ban[index].b[0].y);
					for (var j = 1; j < ban[index].b.length; j++) {
						txt.lineTo(ban[index].b[j].x,ban[index].b[j].y)
				};
				
			txt.closePath();
			
			
			txt.fillStyle = ban[index].color;
			txt.fill();
			txt.strokeStyle = '#333';
			txt.stroke();	
			});
		};
		
	};
		
	</script>

</html>